/* layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  grid-auto-rows: 16rem;
  grid-gap: 1rem;
  grid-auto-flow: dense;
  /* padding-bottom: 100vh; */
}

.grid--big-columns {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.grid--big-gap {
  grid-gap: 1rem;
}

/* styling */
.card--expanded {
  grid-column: span 3;
  grid-row: span 3;
  background-color: rgb(38, 38, 38);
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.card--expanded .card__img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/* @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.fade-in {
  opacity: 0;
  -webkit-animation: fadeIn 0.4s forwards;
          animation: fadeIn 0.4s forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
} */

.card {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

/* .card__img {
  -webkit-transition: -webkit-transform 2s;
  transition: -webkit-transform 2s;
  transition: transform 2s;
  transition: transform 2s, -webkit-transform 2s;
} */